<template>
  <view>
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <text class="nav-item active">要闻</text>
      <text class="nav-item">推荐</text>
      <text class="nav-item">关注流</text>
      <text class="nav-item">24小时</text>
      <text class="nav-item">娱乐</text>
      <text class="nav-item">福州</text>
      <text class="nav-item">财经</text>
    </view>

    <!-- 天气+搜索栏 -->
    <view class="header-bar">
      <text class="weather">27℃ 晴 福州 PM2.5 9</text>
      <input class="search-input" placeholder="搜索关键词" />
    </view>

    <!-- 更新提示栏 -->
    <view class="update-tip">为您更新了19条内容</view>

    <!-- 新闻列表 -->
    <view class="news-list">
      <!-- 置顶新闻（2条） -->
      <view class="card-container">
        <text class="top-tag">置顶</text>
        <view class="card-content">
          <view class="card-text">
            <text class="card-title">2020，我们温暖的记忆</text>
            <view class="card-footer">
              <text class="card-source">新闻联播</text>
              <text class="card-comment">评论 405</text>
            </view>
          </view>
        </view>
      </view>

      <view class="card-container">
        <text class="top-tag">置顶</text>
        <view class="card-content">
          <view class="card-text">
            <text class="card-title">森林大县57年无大火是怎么做到的</text>
            <view class="card-footer">
              <text class="card-source">光明网</text>
              <text class="card-comment">评论 234</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 循环渲染JSON导入的5条新闻 -->
      <view 
        v-for="(news, index) in newsList" 
        :key="index"
        class="card-container"
      >
        <view class="card-content">
          <view class="card-text">
            <text class="card-title">{{ news.title }}</text>
            <view class="card-footer">
              <text class="card-source">{{ news.source }}</text>
              <text class="card-date">{{ news.date }}</text>
              <text class="card-comment">评论 {{ news.commentCount }}</text>
            </view>
          </view>
          <image class="card-img" :src="news.imageUrl" mode="widthFix"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import newsData from '../../../Data/news.json'
const newsList = ref(newsData);
</script>

<style scoped>
/* 导航栏样式 */
.nav-bar {
  display: flex;
  background: #e53935;
  padding: 10rpx 0;
  overflow-x: auto;
}

.nav-item {
  color: #fff;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  white-space: nowrap;
}

.nav-item.active {
  font-weight: bold;
  border-bottom: 2rpx solid #fff;
}

/* 天气+搜索栏样式 */
.header-bar {
  display: flex;
  align-items: center;
  background: #e53935;
  padding: 10rpx 20rpx;
  justify-content: space-between;
}

.weather {
  color: #fff;
  font-size: 26rpx;
}

.search-input {
  width: 400rpx;
  height: 50rpx;
  background: #fff;
  border-radius: 25rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  border: none;
}

/* 更新提示栏样式 */
.update-tip {
  background: #ff9800;
  color: #fff;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
}

/* 新闻列表容器 */
.news-list {
  padding: 10rpx 20rpx;
}

/* 所有新闻卡片通用样式 */
.card-container {
  background: #fff;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 15rpx;
  position: relative;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

/* 仅2个置顶新闻显示的标签 */
.top-tag {
  position: absolute;
  left: 0;
  top: 20rpx;
  background: #ff9800;
  color: #fff;
  font-size: 22rpx;
  padding: 2rpx 12rpx;
  border-radius: 0 10rpx 10rpx 0;
}

/* 新闻内容布局 */
.card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card-text {
  flex: 1;
  margin-right: 20rpx;
  padding-left: 60rpx; 
}

.card-title {
  font-size: 28rpx;
  color: #333;
  line-height: 44rpx;
  margin-bottom: 15rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  display: flex;
  gap: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.card-img {
  width: 160rpx;
  height: 120rpx;
  border-radius: 8rpx;
  object-fit: cover;
}
</style>